<template>
  <div class="service-process-wrapper">
    <div class="fr clearfix mb15">
      <bk-form form-type="inline">
        <bk-form-item label="业务">
          <bk-select
            v-model="biz_id"
            :disabled="false"
            style="width: 250px"
            ext-cls="select-custom"
            @change="handleBizChange"
            ext-popover-cls="select-popover-custom"
            searchable
          >
            <bk-option
              v-for="item in biz_list"
              :key="item.bk_biz_id"
              :id="item.bk_biz_id"
              :name="item.bk_biz_id + '-' + item.bk_biz_name"
            ></bk-option>
          </bk-select>
        </bk-form-item>

        <bk-form-item label="服务">
          <bk-select
            v-model="service_instance_id"
            :disabled="!biz_id"
            style="width: 250px"
            ext-cls="select-custom"
            @change="handleServiceInstanceChange"
            ext-popover-cls="select-popover-custom"
            searchable
          >
            <bk-option
              v-for="item in service_instance_list"
              :key="item.id"
              :id="item.id"
              :name="item.name"
            ></bk-option>
          </bk-select>
        </bk-form-item>

        <bk-form-item>
          <bk-button theme="primary" title="查询" @click="searchProcesses"
            >查询</bk-button
          >
        </bk-form-item>
      </bk-form>
    </div>

    <bk-table
      style="margin-top: 15px"
      :data="process_list"
      :size="size"
      :pagination="pagination"
      @page-change="handlePageChange"
    >
      <bk-table-column label="进程ID" prop="id" />
      <bk-table-column label="进程名称" prop="name" />
      <bk-table-column label="操作" width="150">
        <template slot-scope="props">
          <bk-button
            theme="primary"
            text
            @click="getProcessDetail(props.row.id)"
            >查看详细</bk-button
          >
        </template>
      </bk-table-column>
    </bk-table>

    <bk-sideslider
      class="bk-layout-component-nelgpjna sideslider1e5ab"
      :is-show.sync="isSidesliderShow"
      :title="'进程详情'"
      :show-mask="false"
      :width="600"
      direction="right"
    >
      <template slot="content">
        <div class="step-detail-container">
          <div
            class="step-detail-item"
            v-for="(value, key) in process_detail.property"
            :key="key"
          >
            <strong>{{ key + '：' }}</strong>
            <span>{{ value ? value : '无' }}</span>
          </div>
        </div>
      </template>
    </bk-sideslider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: "small",
      biz_list: [],
      service_instance_list: [],
      process_list: [],
      process_detail: {},
      biz_id: null,
      service_instance_id: null,
      isSidesliderShow: false,
      pagination: {
        current: 1,
        count: 0,
        limit: 10,
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      await this.getBizData();
    },
    async getBizData() {
      try {
        const res = await this.$store.dispatch(
          "example/getBizData",
          {},
          { fromCache: true }
        );
        this.biz_list = res.data.info;
      } catch (e) {
        console.error(e);
      }
    },
    async handleBizChange(newValue) {
      this.biz_id = newValue;
      this.service_instance_id = null;
      this.service_instance_list = [];
      // 获取服务实例列表
      const service_res = await this.$store.dispatch(
        "example/getServicesList",
        {
          bk_biz_id: newValue,
        },
        { fromCache: true }
      );
      // 适配接口返回结构，提取 id 和 name
      this.service_instance_list = (service_res.data.info || []).map(item => ({
        id: item.id || item.service_instance_id,
        name: item.name || item.service_instance_name
      }));
    },
    async handleServiceInstanceChange(newValue) {
      this.service_instance_id = newValue;
    },
    async searchProcesses() {
      if (!this.biz_id || !this.service_instance_id) {
        this.process_list = [];
        return;
      }
      const process_res = await this.$store.dispatch(
        "example/getProcessesList",
        {
          bk_biz_id: this.biz_id,
          service_instance_id: this.service_instance_id,
        },
        { fromCache: true }
      );
      // 适配接口返回结构，提取 id 和 name
      this.process_list = (process_res.data || []).map(item => ({
        id: item.property.bk_process_id,
        name: item.property.bk_process_name,
        property: item.property
      }));
    },
    async getProcessDetail(process_id) {
      // 直接用已查到的 property 展示详细信息
      const process = this.process_list.find(item => item.id === process_id);
      this.process_detail = { property: process ? process.property : {} };
      this.isSidesliderShow = true;
    },
    handlePageChange(page) {
      this.pagination.current = page;
    },
  },
};
</script>
